<template>
  <view class="page-online-users-list">
    <view class="layui-elem-field layui-field-title">
      <text>在线人数列表</text>
    </view>
    <view class="user-list">
      <!-- 这里可以使用 v-for 循环显示在线用户列表 -->
      <view class="user-item" v-for="(user, index) in onlineUsers" :key="index" @click="goToPrivateChat(user)">
        <image :src="user.avatar" class="user-avatar" style="width: 30px; height: 30px; border-radius: 15px; margin-right: 10px;"></image>
        <text>{{ user.username }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      onlineUsers: [] // 假设这里存储在线用户数据
    };
  },
  mounted() {
    // 这里可以添加获取在线用户数据的逻辑，例如通过 API 调用
    // 示例数据，为每个用户添加头像路径
    this.onlineUsers = [
      { username: '小灰', avatar: '/static/images/user01.jpg' },
      { username: '小蓝', avatar: '/static/images/user02.png' },
      { username: '小红', avatar: '/static/images/user03.jpg' }
    ];
  },
  methods: {
    goToPrivateChat(user) {
      // 使用 uni.navigateTo 跳转到私聊页面，并传递用户信息
      uni.navigateTo({
        url: `/pages/privateChat/privateChat?username=${user.username}&avatar=${user.avatar}`
      });
    }
  }
};
</script>

<style scoped>
.page-online-users-list {
  padding: 20px;
}

.user-list {
  margin-top: 20px;
}

.user-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.user-item:last-child {
  border-bottom: none;
}

.user-avatar {
  display: inline-block;
}
</style>